import { onUnmounted, onMounted, ref } from "vue";
export function useContextMenu(container) {
  const x = ref(0);
  const y = ref(0);
  const visible = ref(false);
  const contextMenuHandler = (e) => {
    console.log("右键菜单");
    e.preventDefault();
    x.value = e.clientX;
    y.value = e.clientY;
    visible.value = true;
    console.log("x", x.value, "y", y.value, "visible", visible.value);
  };
  function closeHandler() {
    visible.value = false;
  }
  onMounted(() => {
    container.value.addEventListener("contextmenu", contextMenuHandler);
    window.addEventListener("click", closeHandler);
    window.addEventListener("contextmenu", closeHandler);
  });
  onUnmounted(() => {
    // container.value.removeEventListener("contextmenu", contextMenuHandler);
    // window.removeEventListener("click", closeHandler);
    // window.removeEventListener("contextmenu", closeHandler);
  });
  return {
    x,
    y,
    visible,
  };
}
